<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>材积计算</title>
    <!-- head 中 -->
    <style>
      *{
        margin:0;
        padding:0;
        box-sizing: border-box;
      }
      body {
        padding:10px;
        min-width: 320px;
      }

      .input_params {
        font-size:0;
        margin:10px 0;
        padding:10px;
        background:#eaeaea;
      }
      .input_params label {
        display: inline-block;
        width:10%;
        font-size:14px;
        margin-bottom:10px;
        text-align:center;
      }
      .input_params input {
        width:14%;
        font-size:14px;
        margin-bottom:10px;
      }
      .input_params span {
        display: inline-block;
        font-size:14px;
        margin-bottom:10px;
      }
      .no_modify label {
        display: inline-block;
        width:10%;
        font-size:14px;
        margin-bottom:10px;
        text-align:center;
      }
      .no_modify input {
        width:14%;
        font-size:14px;
        margin-bottom:10px;
      }

      .input_params .upLoadFile {
        width: 52%;
        padding-left: 10px;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css"
    />
  </head>
  <body>
  <a
          href="javascript:;"
          class="add weui-btn weui-btn_mini weui-btn_primary"
  >添加</a
  >

  <a
          href="javascript:;"
          id="commit"
          class="weui-btn weui-btn_mini weui-btn_primary"
  >提交</a
  >
  <a
          href="javascript:;"
          id="reset"
          class="weui-btn weui-btn_mini weui-btn_warn"
  >重置</a
  >

    <div class="no_modify">
      <label for="desnsity">密度</label>
      <input id="desnsity" type="number"  name="density" value="1.1"/>
      <span>&nbsp kg/m³</span>
      <label for="unit_price">单价</label>
      <input id="unit_price" type="number" name="unit_price" value="1400" />
      <span>&nbsp kg/元</span>
    </div>

    <div class="input_commit">
      <div class="input_params">
        <label for="">长</label>
        <input type="number" name="long" />
        <span>&nbsp米</span>
        <label for="">宽</label>
        <input type="number" name="width"  />
        <span>&nbsp米</span>
        <label for="">高</label>
        <input type="number" name="height" />
        <span>&nbsp米</span>

        <input type="hidden" name="image"  />

        <input type="file" class="upLoadFile" accept=".jpg,.png,.gif" />
        <label for="">价格</label>
        <input type="number" disabled name="price" />
        <span>&nbsp元</span>
      </div>
    </div>
    <div><font>总价:</font> <font id="total_price">0</font> 元</div>


    <!-- body 最后 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

    <!-- 如果使用了某些拓展插件还需要额外的JS -->
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
    <script>
      $(function () {

          /**
           * 计算
           */
          $('.compute').click(function () {
              var long = $('.input_params input[type=number][name=long]').val();
              var width = $('.input_params input[type=number][name=width]').val();
              var height = $('.input_params input[type=number][name=height]').val();
              var density = $('#desnsity').val();
              var unit_price = $('#unit_price').val();

              var total_price = 0;
          });
        /**
         *重置
         */
        $('#reset').click(function () {
            window.location.reload();
        });

        /**
         * 提交
         */
        $('#commit').click(function () {

          //微信open_id
          var open_id = "{$open_id}";

          //密度,单价
          var density = $('#desnsity').val();
          var unit_price = $('#unit_price').val();

          var OinputParams = $('.input_params');
          var params = new Array();
          for (var i = 0; i < OinputParams.length; i++) {
            var long = $('.input_params input[type=number][name=long]')
              .eq(i)
              .val();
            var width = $('.input_params input[type=number][name=width]')
              .eq(i)
              .val();
            var height = $('.input_params input[type=number][name=height]')
              .eq(i)
              .val();
            var image = $(
                '.input_params input[type=hidden][name=image]'
            )
              .eq(i)
              .val();


            var obj = {
              long: long,
              width: width,
              height: height,
              density: density,
              unit_price: unit_price,
              image: image,
            };

            params.push(obj);
          }


          params = JSON.stringify(params);

          var formData = new FormData();
          formData.append('open_id', open_id);
          formData.append('params', params);


          $.ajax({
            type: 'POST', // 数据提交类型
            url: '/wood/commit', // 发送地址
            data: formData, //发送数据
            async: true, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false, //
            success: function (res) {
                var resObj = JSON.parse(res);

                if (resObj.code == 200) {

                    var total_price = resObj.total_price;

                    $('#total_price').html(total_price);
                    var arrUnitTotal = resObj.unit_total_price
                    for(var i = 0;i<arrUnitTotal.length;i++) {
                        $('.input_params input[type=number][name=price]').eq(i).val( arrUnitTotal[i]);
                    }

//                    $.alert('操作成功!', function(){
//                        //重新加载页面
//
//                    });
                }
            }
          });
        });

        $('.input_commit').on('click', function (e) {
          var e = e || event;
          var target = e.target;
          var index = e.target.className.indexOf('upLoadFile');
          if (index != -1) {
            target.onchange = change;
          }
        });

        /** 文件上传  */
        function change() {
          var parent = this.parentNode;
          var img = parent.getElementsByTagName('img')[0];
          if (img) {
            parent.removeChild(img);
          }
          var render = new FileReader();
          var file = this.files[0];
          var img = document.createElement('img');
          render.onload = function (e) {
            img.src = this.result;
            img.width = '200';
            parent.appendChild(img);
          };
          render.readAsDataURL(file);

          requestFile(file, parent);
        }

        function requestFile(file, parent) {
          var formData = new FormData();
          formData.append('img', file);
           $.ajax({
             type: 'POST',
             url: '/wood/upload',
             data: formData,
             async: true,
             processData: false,
             contentType: false,
             success: function (res) {
               var resObj = JSON.parse(res);

               if (resObj.code == 200) {
                 var long = resObj.data.long || 0;
                 var width = resObj.data.width || 0;
                 var height = resObj.data.height || 0;
                 var file_path = resObj.data.file_path || 0;

                  parent.querySelector(
                    'input[type=number][name=long]'
                  ).value = long;
                  parent.querySelector(
                    'input[type=number][name=width]'
                  ).value = width;
                  parent.querySelector(
                    'input[type=number][name=height]'
                  ).value = height;
                   parent.querySelector(
                       'input[type=hidden][name=image]'
                   ).value = file_path;
               }
             },
           });
        }
      });

      /**
       * 添加
       */
      $('.add').click(function () {
        var child = $('.input_params').get(0).cloneNode(true, true);
        var img = child.getElementsByTagName('img')[0];
        var childNode = child.childNodes;
        if (child.lastChild.localName === 'img') {
          child.removeChild(img);
        }
        for (var i = 0; i < childNode.length; i++) {
          let subChild = childNode[i];
          subChild.value = '';
        }
        var parent = $('.input_commit')[0];
        parent.append(child);
      });
    </script>
  </body>
</html>
